<template>
  <div class="Row_content payment_account_create">
    <Form ref="formValidate"
      inline
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="110">
      <FormItem label="名称:"
        prop="accountName">
        <Input v-model="formValidate.accountName"
          placeholder="请输入"
          :maxlength="30"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="商户名称:"
        prop="merchantName">
        <Input v-model="formValidate.merchantName"
          placeholder="请输入"
          :maxlength="30"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="法人代表:"
        prop="legalPerson">
        <Input v-model="formValidate.legalPerson"
          placeholder="请输入"
          :maxlength="5"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="账户类型:"
        prop="bankAccountType">
        <Select v-model="formValidate.bankAccountType"
          style="width:280px">
          <Option v-for="item in accountTypes"
            :value="item.value"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="开户银行:"
        prop="settlementBank">
        <Select v-model="formValidate.settlementBank"
          style="width:280px">
          <Option v-for="item in banks"
            :value="item.value"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="开户行名称:"
        prop="bankName">
        <Input v-model="formValidate.bankName"
          placeholder="请输入"
          :maxlength="25"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="银行卡号:"
        prop="cardNo">
        <Input v-model="formValidate.cardNo"
          placeholder="请输入"
          @on-keyup="filterNumber"
          :maxlength="20"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="支付服务商:"
        prop="providerCode">
        <Select v-model="formValidate.providerCode"
          @on-change="providerChange"
          :disabled="!!isChild"
          style="width:280px">
          <Option v-for="item in serviceNames"
            :value="item.value"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
    </Form>
    <!-- 支付宝 -->
    <Form ref="alipayValidate"
      v-show="formValidate.providerCode === 'alipay'"
      inline
      :model="formAlipay"
      :rules="alipayValidate"
      :label-width="110">
      <FormItem label="支付宝应用ID:"
        prop="alipayId">
        <Input v-model="formAlipay.alipayId"
          placeholder="请输入"
          @on-keyup="filterNumber"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="合作伙伴身份ID:"
        prop="alipayPid">
        <Input v-model="formAlipay.alipayPid"
          placeholder="请输入"
          @on-keyup="filterNumber"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="商户私钥:"
        prop="privateKey">
        <Input v-model="formAlipay.privateKey"
          placeholder="请输入"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="商户公钥:"
        prop="publicKey">
        <Input v-model="formAlipay.publicKey"
          placeholder="请输入"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="支付宝公钥:"
        prop="alipayPublickey">
        <Input v-model="formAlipay.alipayPublickey"
          placeholder="请输入"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="签名方式:"
        prop="signType">
        <Select v-model="formAlipay.signType"
          style="width:280px">
          <Option v-for="item in signatures"
            :value="item.value"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
    </Form>
    <!-- 支付宝 -->
    <!-- 银联 -->
    <div class="cmb-form"
      v-show="formValidate.providerCode === 'cmb'"
      v-for="(formCmb, index) in formCmbs"
      :key="index">
      <Form :ref="`cmbForm${index}`"
        inline
        :model="formCmb"
        :rules="cmbsValidate[index]"
        :label-width="110">
        <FormItem label="应用名称:"
          prop="appName">
          <Input v-model="formCmb.appName"
            placeholder="请输入"
            :maxlength="10"
            @on-keyup="filterSpace(index)"
            class="Row_content_input">
          </Input>
        </FormItem>
        <FormItem label="应用编号:"
          prop="appId">
          <Input v-model="formCmb.appId"
            placeholder="请输入"
            :maxlength="50"
            @on-keyup="filterSpace(index)"
            class="Row_content_input">
          </Input>
        </FormItem>
        <FormItem label="应用场景:"
          prop="channelType">
          <Select v-model="formCmb.channelType"
            @on-change="channelTypeChange(formCmb, index)"
            style="width:280px">
            <Option v-for="item in cmbPayPassages"
              :value="item.value"
              :key="item.value">
              {{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <template v-if="formCmb.channelType !== '9'">
          <FormItem label="应用秘钥:"
            prop="appKey">
            <Input v-model="formCmb.appKey"
              placeholder="请输入"
              @on-keyup="filterSpace(index)"
              class="Row_content_input">
            </Input>
          </FormItem>
          <FormItem label="签名方式:"
            prop="signType">
            <Select v-model="formCmb.signType"
              style="width:280px">
              <Option v-for="item in cmbSignatures"
                :value="item.value"
                :key="item.value">
                {{ item.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="APP ID:"
            v-if="formCmb.channelType === '3' || formCmb.channelType === '5'"
            prop="subAppId">
            <Input v-model="formCmb.subAppId"
              placeholder="请输入"
              @on-keyup="filterSpace(index)"
              class="Row_content_input">
            </Input>
          </FormItem>
        </template>
        <template v-else>
          <FormItem label="商户公钥:"
            prop="publicKey">
            <Input v-model="formCmb.publicKey"
              placeholder="请输入"
              @on-keyup="filterSpace(index)"
              class="Row_content_input">
            </Input>
          </FormItem>
          <FormItem label="商户私钥:"
            prop="privateKey">
            <Input v-model="formCmb.privateKey"
              placeholder="请输入"
              @on-keyup="filterSpace(index)"
              class="Row_content_input">
            </Input>
          </FormItem>
          <FormItem label="招商公钥:"
            prop="cmbPublicKey">
            <Input v-model="formCmb.cmbPublicKey"
              placeholder="请输入"
              @on-keyup="filterSpace(index)"
              class="Row_content_input">
            </Input>
          </FormItem>
          <FormItem label="签名方式:"
            prop="signType">
            <Select v-model="formCmb.signType"
              style="width:280px">
              <Option v-for="item in signatures"
                :value="item.value"
                :key="item.value">
                {{ item.label }}
              </Option>
            </Select>
          </FormItem>
        </template>
      </Form>
      <div class="operater">
        <i class="iconsys icondel"
          title="删除"
          v-if="formCmbs.length !== 1"
          @click="deleteCmb(index)"></i>
        <i class="iconsys iconadd"
          style="color: #5cadff"
          title="添加"
          v-if="formCmbs.length === index + 1"
          @click="pushNewCmb"></i>
      </div>
    </div>
    <!-- 银联 -->
    <!-- 微信 -->
    <Form ref="weixinValidate"
      v-show="formValidate.providerCode === 'weixin'"
      inline
      :model="formWexin"
      :rules="weixinValidate"
      :label-width="110">
      <FormItem label="商户账户:"
        prop="mchId">
        <Input v-model="formWexin.mchId"
          placeholder="请输入"
          :disabled="!!isChild"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="支付密钥:"
        prop="payPartnerKey">
        <Input v-model="formWexin.payPartnerKey"
          placeholder="请输入"
          @on-keyup="filterSpace"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="公众号APP ID:"
        prop="appId">
        <Input v-model="formWexin.appId"
          placeholder="请输入"
          :disabled="!!isChild"
          @on-keyup="filterSpace"
          :maxlength="100"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="公众号名称:"
        prop="appName">
        <Input v-model="formWexin.appName"
          placeholder="请输入"
          :disabled="!!isChild"
          @on-keyup="filterSpace"
          :maxlength="100"
          class="Row_content_input">
        </Input>
      </FormItem>
      <FormItem label="小程序APP ID:"
        prop="miniProgramId">
        <Input v-model="formWexin.miniProgramId"
          placeholder="请输入"
          :disabled="!!isChild"
          @on-keyup="filterSpace"
          :maxlength="100"
          class="Row_content_input">
        </Input>
      </FormItem>
      <!-- 子 -->
      <template v-if="isChild">
        <FormItem label="子商户账号:"
          prop="subMchId">
          <Input v-model="formWexin.subMchId"
            placeholder="请输入"
            @on-keyup="filterSpace"
            class="Row_content_input">
          </Input>
        </FormItem>
      </template>
      <!-- 子 -->
    </Form>
    <!-- 微信 -->
    <Form inline>
      <FormItem class="form-btn">
        <Button type="primary"
          @click="handleSubmit"
          class="system-submit-btn">确定</Button>
        <Button class="system-submit-btn"
          @click="handleReset"
          style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { routeEqual } from '@/libs/util'
import { mapState } from 'vuex'
import accountTypeMixins from '../mixins/accountType'
import passageMixins from '../mixins/payPassage'
import { addAccount, getAccountDetail, updateAccount } from '@/api/pay/account.js'
import { getServiceSelects } from '@/api/pay/service.js'
export default {
  name: 'payment_account_edit',
  mixins: [accountTypeMixins, passageMixins],
  data () {
    return {
      isChild: false,
      serviceNames: [],
      formValidate: {
        accountName: '',
        merchantName: '',
        legalPerson: '',
        bankAccountType: '',
        settlementBank: '',
        bankName: '',
        cardNo: '',
        providerCode: 'weixin'
      },
      ruleValidate: {
        accountName: [{ required: true, message: '名称不能为空' }],
        merchantName: [{ required: true, message: '商户名称不能为空' }],
        legalPerson: [{ required: true, message: '法人代表不能为空' }],
        bankAccountType: [{ required: true, message: '账户类型不能为空' }],
        settlementBank: [{ required: true, message: '开户银行不能为空' }],
        bankName: [{ required: true, message: '开户行名称不能为空' }],
        cardNo: [{ required: true, message: '银行卡号不能为空' }, {
          validator: (rule, value, callback) => {
            if (/[a-zA-Z]/.test(value)) {
              callback(new Error('请输入正确的银行卡号'))
            }
            callback()
          },
          trigger: 'blur'
        }],
        providerCode: [{ required: true, message: '支付服务商不能为空' }]
      },
      formWexin: {
        mchId: '',
        appId: '',
        appName: '',
        miniProgramId: '',
        payPartnerKey: '',
        subMchId: ''
      },
      weixinValidate: {
        mchId: [{ required: true, message: '商户账号不能为空' }],
        // appId: [{ required: true, message: 'APP ID不能为空' }],
        // appName: [{ required: true, message: '公众号名称不能为空' }],
        payPartnerKey: [{ required: true, message: '支付密钥不能为空' }],
        subMchId: [{ required: true, message: '子商户账号不能为空' }]
      },
      formAlipay: {
        alipayId: '',
        alipayPid: '',
        privateKey: '',
        publicKey: '',
        alipayPublickey: '',
        signType: ''
      },
      alipayValidate: {
        alipayId: [{ required: true, message: '支付宝应用ID不能为空' }, {
          validator: (rule, value, callback) => {
            if (/[a-zA-Z]/.test(value)) {
              callback(new Error('请输入正确的支付宝应用ID'))
            }
            callback()
          },
          trigger: 'blur'
        }],
        alipayPid: [{ required: true, message: '合作伙伴身份ID不能为空' }, {
          validator: (rule, value, callback) => {
            if (/[a-zA-Z]/.test(value)) {
              callback(new Error('请输入正确的合作伙伴身份ID'))
            }
            callback()
          },
          trigger: 'blur'
        }],
        privateKey: [{ required: true, message: '商户私钥不能为空' }],
        publicKey: [{ required: true, message: '商户公钥不能为空' }],
        alipayPublickey: [{ required: true, message: '支付宝公钥不能为空' }],
        signType: [{ required: true, message: '签名方式不能为空' }]
      },
      formCmbs: [],
      cmbsValidate: []
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.id !== to.params.id) {
        vm.id = to.params.id
        vm.getDetail()
      }
    })
  },
  mounted () {
    this.id = this.$route.params.id
    this.isChild = +(this.$route.query.isChild || '')
    this.isEdit = +(this.$route.query.isEdit || '')
    this.getServiceLists()
    this.getDetail()
  },
  methods: {
    filterSpace (index) {
      const formValidate = this.formValidate
      formValidate.accountName = formValidate.accountName.replace(/\s+/g, '')
      formValidate.merchantName = formValidate.merchantName.replace(/\s+/g, '')
      formValidate.legalPerson = formValidate.legalPerson.replace(/\s+/g, '')
      formValidate.bankName = formValidate.bankName.replace(/\s+/g, '')
      const formWexin = this.formWexin
      formWexin.mchId = formWexin.mchId.replace(/\s+/g, '')
      formWexin.appId = formWexin.appId.replace(/\s+/g, '')
      formWexin.appName = formWexin.appName.replace(/\s+/g, '')
      formWexin.miniProgramId = formWexin.miniProgramId.replace(/\s+/g, '')
      formWexin.payPartnerKey = formWexin.payPartnerKey.replace(/\s+/g, '')
      formWexin.subMchId = formWexin.subMchId.replace(/\s+/g, '')
      const formAlipay = this.formAlipay
      formAlipay.privateKey = formAlipay.privateKey.replace(/\s+/g, '')
      formAlipay.publicKey = formAlipay.publicKey.replace(/\s+/g, '')
      formAlipay.alipayPublickey = formAlipay.alipayPublickey.replace(/\s+/g, '')
      const formCmb = this.formCmbs[index]
      if (formCmb) {
        formCmb.appName = formCmb.appName.replace(/\s+/g, '')
        formCmb.appId = formCmb.appId.replace(/\s+/g, '')
        formCmb.appKey = formCmb.appKey.replace(/\s+/g, '')
        formCmb.subAppId = formCmb.subAppId.replace(/\s+/g, '')
        formCmb.publicKey = formCmb.publicKey.replace(/\s+/g, '')
        formCmb.privateKey = formCmb.privateKey.replace(/\s+/g, '')
        formCmb.cmbPublicKey = formCmb.cmbPublicKey.replace(/\s+/g, '')
      }
    },
    filterNumber () {
      const formValidate = this.formValidate
      formValidate.cardNo = formValidate.cardNo.replace(/[^0-9]/g, '')
      const formAlipay = this.formAlipay
      formAlipay.alipayId = formAlipay.alipayId.replace(/[^0-9]/g, '')
      formAlipay.alipayPid = formAlipay.alipayPid.replace(/[^0-9]/g, '')
    },
    pushNewCmb () {
      this.formCmbs.push({
        appName: '',
        appId: '',
        channelType: '',
        appKey: '',
        subAppId: '',
        signType: '',
        publicKey: '',
        cmbPublicKey: '',
        privateKey: ''
      })
      this.cmbsValidate.push({
        appName: [{ required: true, message: '应用名称不能为空' }],
        appId: [{ required: true, message: '应用编号不能为空' }],
        channelType: [{ required: true, message: '应用场景不能为空' }],
        appKey: [{ required: true, message: '应用秘钥不能为空' }],
        subAppId: [{ required: true, message: 'APP ID不能为空' }],
        signType: [{ required: true, message: '签名方式不能为空' }],
        cmbPublicKey: [{ required: true, message: '招商公钥不能为空' }],
        publicKey: [{ required: true, message: '商户公钥不能为空' }],
        privateKey: [{ required: true, message: '商户私钥不能为空' }]
      })
    },
    getServiceLists () {
      getServiceSelects({
        merchantId: this.merchantId,
        deleted: 0
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.serviceNames = (result.data || []).map(item => ({
            label: item.providerName,
            value: item.providerCode
          }))
        }
      })
    },
    getDetail () {
      if (this.id) {
        getAccountDetail({
          paymentAccountId: this.id,
          merchantId: this.merchantId
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            const form = result.data || {}
            if (this.isChild && !this.isEdit) {
              this.formValidate.providerCode = form.providerCode
            } else {
              this.formValidate = {
                accountName: form.accountName,
                merchantName: form.merchantName,
                legalPerson: form.legalPerson,
                bankAccountType: form.bankAccountType,
                settlementBank: form.settlementBank,
                bankName: form.bankName,
                cardNo: form.cardNo,
                providerCode: form.providerCode
              }
            }
            const accountExtraList = form.accountExtraList || []
            const detail = accountExtraList[0] || {}
            switch (form.providerCode) {
              case 'weixin':
                this.formWexin = {
                  mchId: detail.mchId,
                  appId: detail.appId,
                  appName: detail.appName,
                  miniProgramId: detail.miniProgramId,
                  payPartnerKey: (this.isChild && !this.isEdit) ? '' : detail.payPartnerKey,
                  subMchId: (this.isChild && !this.isEdit) ? '' : (detail.subMchId || '')
                }
                break
              case 'alipay':
                this.formAlipay = {
                  alipayId: detail.appId,
                  alipayPid: detail.alipayPid,
                  privateKey: detail.privateKey,
                  publicKey: detail.publicKey,
                  alipayPublickey: detail.alipayPublickey,
                  signType: detail.signType
                }
                break
              default:
                this.formCmbs = accountExtraList.map(item => {
                  return {
                    appName: item.appName,
                    appId: item.appId,
                    channelType: '' + item.channelType,
                    appKey: item.appKey,
                    subAppId: item.subAppId || '',
                    signType: item.signType,
                    cmbPublicKey: item.cmbPublicKey || '',
                    publicKey: item.publicKey || '',
                    privateKey: item.privateKey || ''
                  }
                })
                this.cmbsValidate = accountExtraList.map(() => ({
                  appName: [{ required: true, message: '应用名称不能为空' }],
                  appId: [{ required: true, message: '应用编号不能为空' }],
                  channelType: [{ required: true, message: '应用场景不能为空' }],
                  appKey: [{ required: true, message: '应用秘钥不能为空' }],
                  subAppId: [{ required: true, message: 'APP ID不能为空' }],
                  signType: [{ required: true, message: '签名方式不能为空' }],
                  cmbPublicKey: [{ required: true, message: '招商公钥不能为空' }],
                  publicKey: [{ required: true, message: '商户公钥不能为空' }],
                  privateKey: [{ required: true, message: '商户私钥不能为空' }]
                }))
            }
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      }
    },
    getParams () {
      const formValidate = this.formValidate
      let params = {
        merchantId: this.merchantId,
        merchantName: formValidate.merchantName,
        accountName: formValidate.accountName,
        legalPerson: formValidate.legalPerson,
        bankAccountType: formValidate.bankAccountType,
        settlementBank: formValidate.settlementBank,
        bankName: formValidate.bankName,
        cardNo: formValidate.cardNo,
        providerCode: formValidate.providerCode,
        accountType: formValidate.providerCode
      }
      let accountExtraList = []
      switch (formValidate.providerCode) {
        case 'weixin':
          const formWexin = this.formWexin
          const list = {
            mchId: formWexin.mchId,
            appId: formWexin.appId,
            appName: formWexin.appName,
            miniProgramId: formWexin.miniProgramId,
            payPartnerKey: formWexin.payPartnerKey
          }
          accountExtraList = [list]
          if (this.isChild) {
            accountExtraList = [{ ...list, subMchId: formWexin.subMchId }]
          }
          break
        case 'alipay':
          const formAlipay = this.formAlipay
          accountExtraList = [{
            appId: formAlipay.alipayId,
            alipayPid: formAlipay.alipayPid,
            privateKey: formAlipay.privateKey,
            publicKey: formAlipay.publicKey,
            alipayPublickey: formAlipay.alipayPublickey,
            signType: formAlipay.signType
          }]
          break
        default:
          accountExtraList = this.formCmbs.map(item => {
            return {
              appName: item.appName,
              appId: item.appId,
              channelType: +item.channelType,
              appKey: item.appKey,
              subAppId: item.subAppId,
              signType: item.signType,
              cmbPublicKey: item.cmbPublicKey,
              publicKey: item.publicKey,
              privateKey: item.privateKey
            }
          })
      }
      return { ...params, accountExtraList }
    },
    providerChange () {
      this.$refs.weixinValidate.resetFields()
      this.$refs.alipayValidate.resetFields()
      this.formCmbs.forEach((item, index) => {
        this.$refs['cmbForm' + index][0].resetFields()
      })
      if (this.formCmbs.length) {
        this.formCmbs = this.formCmbs.map(() => ({
          appName: '',
          appId: '',
          channelType: '',
          appKey: '',
          subAppId: '',
          signType: '',
          cmbPublicKey: '',
          publicKey: '',
          privateKey: ''
        }))
        this.formCmbs = this.formCmbs.splice(0, 1)
      } else {
        this.pushNewCmb()
      }
    },
    channelTypeChange (list, index) {
      const copyList = { ...list }
      this.$refs[`cmbForm${index}`][0].resetFields()
      this.$set(this.formCmbs, index, {
        appName: copyList.appName,
        appId: copyList.appId,
        channelType: copyList.channelType,
        signType: '',
        appKey: '',
        subAppId: '',
        cmbPublicKey: '',
        publicKey: '',
        privateKey: ''
      })
    },
    deleteCmb (index) {
      this.$refs['cmbForm' + index][0].resetFields()
      this.formCmbs[index] = {
        appName: '',
        appId: '',
        channelType: '',
        appKey: '',
        subAppId: '',
        signType: '',
        cmbPublicKey: '',
        publicKey: '',
        privateKey: ''
      }
      this.formCmbs.splice(index, 1)
    },
    handleSubmit () {
      const formValidate = this.formValidate
      let flag = false
      switch (formValidate.providerCode) {
        case 'weixin':
          this.$refs.weixinValidate.validate(val => {
            flag = val
          })
          const formWexin = this.formWexin
          if (!formWexin.miniProgramId) {
            if (!formWexin.appId || !formWexin.appName) {
              flag = false
              this.$Message.error('小程序或公众号必须填完一种')
            }
          }
          break
        case 'alipay':
          this.$refs.alipayValidate.validate(val => {
            flag = val
          })
          break
        default:
          flag = true
          this.formCmbs.forEach((item, index) => {
            this.$refs['cmbForm' + index][0].validate(val => {
              if (!val) {
                flag = false
              }
            })
          })
      }
      this.$refs.formValidate.validate(val => {
        if (val && flag) {
          const params = this.getParams()
          let request
          if (this.id) {
            if (this.isChild && !this.isEdit) {
              request = request = addAccount({ ...params, parentId: this.id })
            } else {
              request = updateAccount({ ...params, paymentAccountId: this.id })
            }
          } else {
            request = addAccount(params)
          }
          request.then(res => {
            const result = res.data || {}
            if (result.status === 200) {
              this.$Message.success(this.id ? '编辑成功！' : '新增成功！')
              this.handleReset()
            } else {
              this.$Message.error(`${result.error}`)
            }
          }).catch(err => {
            this.$Message.error(`${err}`)
          })
        }
      })
    },
    handleReset () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'payment_account_list'
        })
      })
    }
  }
}
</script>

<style lang="less">
.payment_account_create {
  width: 850px;
  .form-btn {
    margin-top: 0;
    margin-left: 50%;
    transform: translateX(-50%)
  }
  .cmb-form {
    padding-top: 20px;
    margin-bottom: 20px;
    background: #F8F8F9;
    border: 1px solid #E9E9E9;
    border-radius: 3px;
    position: relative;
    &:last-child {
      margin-bottom: 0
    }
  }
  .operater {
    position: absolute;
    top: 30%;
    right: -15px;
    transform: translateX(100%)
  }
}
</style>
